<template>
  <div>
    <basic-container>
      <div class="title">审批流程</div>
      <div class= "table-wrap">
        <el-col class="table-box" v-for="(item, i) in processTypeData" :key="i"  :xs="23" :sm="11" :md="11" :lg="7" :xl="7">
          <div class="table-title">{{item.value.name}}</div>
          <el-table :data="item.value.value" style="width: 100%" border :show-header="false">
            <el-table-column prop="title" width="100" align="center"></el-table-column>
            <el-table-column prop="name" align="center"></el-table-column>
            <el-table-column width="100" align="center">
              <template slot-scope="scope">
                <el-button @click.native.prevent="handleSet(scope.row, scope.$index)" type="text" size="small">设置</el-button>
                <el-button @click.native.prevent="handleReset(scope.row, scope.$index)" type="text" size="small" style="color:#333">重置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </div>
    </basic-container>

    <!-- 添加/修改 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="35%" class="approval">
      <el-radio-group v-model="dialogForm.type" @change="changeRadio">
       <!-- <ul>
          <li>
            <span class="dialog-title">类型1：</span>
            <el-radio label="所属部门主管" :value="0"></el-radio>
          </li>
          <li>
            <span class="dialog-title">类型2：</span>
            <span>
              <el-radio label="所属实验室负责人" :value="1"></el-radio>
              <el-radio label="所属仓库负责人" :value="2"></el-radio>
            </span>
          </li>
          <li>
            <span class="dialog-title">类型：</span>-->
        <el-tree @check="handleCheckChange" :data="treeData" ref="tree"
                show-checkbox
                node-key="userId"
                :props="treeOption">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
         <!-- </li>
        </ul>-->
        <span class="hint" v-if="hintVerify">请选择审批类型</span>
      </el-radio-group>

      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleAddLine('dialogForm')"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { processReset, getProcess , processSet } from  '@/api/public/process'
  import { getUserOfDepartmentId ,getUsergetDepartmentUser } from  '@/api/public/userInfo'
  import { getDepartmentList } from "@/api/sysSetup/uesr.js";
  import { DepartmentTreeVChildrenNull ,DepartmentTreeVChildrenNullDisabled} from '@/util/util'
  import { validatenull } from '@/util/validate'

  export default {
  name: "approvalManage",
  data() {
    return {
      treeDataId: 9999,
      num: 5,
      dialogTitle: "选择审批人",
      dialogFormVisible: false,
      dialogForm: { type: "" },
      hintVerify: false,
      treeOption: {
        children: "children",
        label: "label"
      },
      treeData: [ ],
      processTypeData:[
        {key:'TYPE_00',value:{typr:0,name:'设备预约',grode:3 ,value: [] }},
        {key:'TYPE_01',value:{typr:1,name:'设备借用',grode:3 ,value: [] }},
        {key:'TYPE_02',value:{typr:2,name:'设备维保',grode:3 ,value: [] }},
        {key:'TYPE_03',value:{typr:3,name:'设备报废',grode:3 ,value: [] }},
        {key:'TYPE_04',value:{typr:4,name:'耗材领用',grode:3 ,value: [] }},
        {key:'TYPE_05',value:{typr:5,name:'危险领用',grode:3 ,value: [] }},
        {key:'TYPE_06',value:{typr:6,name:'采购审批(危险品)',grode:3 ,value: [] }},
        {key:'TYPE_07',value:{typr:7,name:'入库审批(危险品)',grode:3 ,value: [] }},
        {key:'TYPE_08',value:{typr:8,name:'退货审批(危险品)',grode:3 ,value: [] }},
        {key:'TYPE_09',value:{typr:9,name:'报损审批(危险品)',grode:3 ,value: [] }},
        {key:'TYPE_10',value:{typr:10,name:'盘点审批(危险品)',grode:3 ,value: [] }},
        {key:'TYPE_11',value:{typr:11,name:'采购审批(耗材)',grode:3 ,value: [] }},
        {key:'TYPE_12',value:{typr:12,name:'入库审批(耗材)',grode:3 ,value: [] }},
        {key:'TYPE_13',value:{typr:13,name:'退货审批(耗材)',grode:3 ,value: [] }},
        {key:'TYPE_14',value:{typr:14,name:'报损审批(耗材)',grode:3 ,value: [] }},
        {key:'TYPE_15',value:{typr:15,name:'盘点审批(耗材)',grode:3 ,value: [] }}],
      processData:[],
      processGrodeData:[{name:'一级',enum: 'ONE'},{name:'二级',enum: 'TOW'},{name:'三级',enum: 'THREE'}],
      departmentOption:[],
      getDepartmentTree:[],
      formSubmit:{ }
    };
  },
  created(){
      this._getProcess();
      this.openMode()
  },
  methods: {
    handleCheckChange(node){
        this.$refs.tree.setCheckedKeys([]);
        this.$refs.tree.setCheckedNodes([node]);
        console.log(node);
        this.formSubmit.userId = node.userId
    },
    treeInfo(data){
        data.forEach(item=>{
            this._getUserInfOfSearch(item)
            if(!validatenull(item.children)){
                this.treeInfo(item.children)
            }
        })
    },
    _getUserInfOfSearch(node){
        getUserOfDepartmentId({
            departmentId: node.id
        }).then(res=>{
            if (res.data.code == 200) {
                res.data.data.forEach(item=>{
                    const newChild = { id: this.treeDataId+item.id,userId:item.id, label:(item.isManage==1?"(主管)":"")+item.name+item.mobile, children: [] };
                    if (!node.children) {
                        this.$set(node, 'children', []);
                    }
                    node.children.push(newChild);
                })
            }
        })
    },
    info(){
        this.processTypeData.forEach(item=>{
            item.value.value = []
            for(let i = 0; i< item.value.grode;i++){
                let name = '-- --'
                let type = item.key
                let level = this.processGrodeData[i].enum
                let userId = null
                let id = null
                for(let j = 0; j < this.processData.length; j++){
                    if( item.key == this.processData[j].type &&
                        this.processGrodeData[i].enum == this.processData[j].level){
                        name = this.processData[j].departmentName + "：" + this.processData[j].dealUserInfoName;
                        userId = this.processData[j].userInfoId
                        id = this.processData[j].id
                        j = this.processData.length;
                    }
                }
                item.value.value.push({
                    title: this.processGrodeData[i].name + '审批人',
                    type: type,
                    level: level,
                    name :name,
                    userId: userId,
                    id: id
                })
            }
        })
    },
    _getProcess(){
        getProcess().then(res=>{
            if (res.data.code == 200) {
                this.processData = res.data.data;
                this.info()
            } else {
                this.$notify.error({ title: '查询失败', message: '获取配置失败！', type: 'danger', });
            }
        })
    },
    // 设置
    handleSet(row, index) {
      this.dialogFormVisible = true;
      this.dialogForm.type = "";
      this.formSubmit = row
      setTimeout(() => {
          this.$refs.tree.setCheckedKeys([]);
          this.$refs.tree.setCheckedKeys([row.userId]);
      },0)
    },
    openMode(){
        getDepartmentList().then(res => {
            if (res.data.code === 200) {
                this.treeData = DepartmentTreeVChildrenNullDisabled(res.data.data)
                this.treeInfo(this.treeData)
            } else {
                this.$notify.error({ title: '查询失败', message: '获取配置失败！', type: 'danger', });
            }
        });
    },
    // 重置
    handleReset(row, index) {
        console.log(row)
        processReset({id: row.id}).then(res=>{
            if (res.data.code == 200) {
                this.$notify({ title: '操作成功', type: 'success', message: '设置成功!' });
                this._getProcess()
            } else {
                this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
            }
        })
    },
    // 确认新增/修改
    handleAddLine(formName) {
        let data = [];
        /*this.$refs.tree.getCheckedNodes().forEach(item=>{
            if(!validatenull(item.userId)){
                data.push(item)
            }
        })
        if(data.length!=1){
            this.$notify.error({ title: '操作失败', message: '请选择一位用户！', type: 'danger', })
            return
        }*/
        if(validatenull(this.formSubmit.userId)){
            this.$notify.error({ title: '操作失败', message: '请选择一位用户！', type: 'danger', })
            return
        }
        let formData ={
            level:this.formSubmit.level,
            type:this.formSubmit.type,
            userInfoId: this.formSubmit.userId
        }
        processSet(formData).then(res=>{
            if (res.data.code == 200) {
                this.$notify({ title: '操作成功', type: 'success', message: '设置成功!' });
                this.dialogFormVisible = false;
                this._getProcess()
            } else {
                this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
            }
        })
    },
    //   点击类型3-部门
    handleNodeClick(data) {
      console.log(data);
    },
    changeRadio(value) {
      console.log(value);
      if (value) this.hintVerify = false;
    }
  }
};
</script>

<style scope>
.title {
  font-size: 16px;
  padding-bottom: 20px;
  /* border-bottom: 1px dotted #dfdede; */
  padding-left: 1.5%;
}
.table-wrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-top: 20px;
}
.table-box {
/*  width: 30%;
  min-width: 400px;*/
  margin: 0.5%;
}

.table-title {
  font-size: 16px;
  text-align: center;
  padding: 12px 0;
  border: 1px solid #ebeef5;
  border-bottom: 0;
}
.dialog-title {
  font-size: 14px;
  width: 60px;
}
.approval li {
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
}
/*.approval .el-tree {
  height: 200px;
  overflow-y: auto;
}*/
.hint {
  font-size: 12px;
  color: red;
  margin-left: 60px;
}
</style>
<style>
.approval .el-radio {
  padding-right: 20px;
}
.approval .el-radio__input {
  position: absolute;
  right: 0;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-table .cell{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
</style>
